<template>
  <ListPaper>
    <!-- 顶部搜索区域 -->
    <template #header-search>
      <!-- <SearchBox
        v-model="searchData"
        :fields="searchFields"
        :loading="tableLoading"
        :is-show-reset-btn="true"
        :is-show-all-fields="false"
        size="small"
        @search-change="searchList"
        @reset="handleReset"
      /> -->
      <TableSearch :conditionList="searchFields" @search="searchList"
      @reset="handleReset" />
    </template>

    <!-- 顶部操作按钮 -->
    <template #header-button>
      <!-- <el-button type="primary" @click="handleCreate">新增</el-button> -->
    </template>

    <!-- 列表上方操作按钮 -->
    <template #list-button>
      <el-button @click="handleExport">导出Excel</el-button>
    </template>

    <!-- 列表内容区域 -->
    <template #list>
      <el-table
        :data="totalData"
        v-loading="tableLoading"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
              {{ row.status === 1 ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 底部左侧按钮 -->
    <template #footer-buttons>
      <el-button @click="handleRefresh">刷新</el-button>
    </template>

    <!-- 底部右侧分页 -->
    <template #footer>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :total="pageTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="pageChange"
        @size-change="sizeChange"
      />
    </template>
  </ListPaper>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useTableList } from "@/hooks/useTableList";
import ListPaper from "@/components/ListPaper/index.vue";
import TableSearch from "./components/TableSearch/TableSearch.vue";
// 模拟API请求函数
const fetchApi = (params: any) => {
  // 这里替换为您的实际API调用
  console.log("请求参数:", params);
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = Array.from({ length: 10 }, (_, i) => {
        console.log("i", i);
        return {
          id: i + 1 ,
          name: `项目${i + 1 }`,
          status: Math.random() > 0.5 ? 1 : 0,
        };
      });

      resolve({
        code: 0,
        data: {
          list: data,
          totalCount: 100,
          totalPage: 5,
          pageNo: 1,
          pageSize: 20,
          offset: 5,
        },
      });
    }, 500);
  });
};
const searchData = ref({});
// 使用useTableList hook
const {
  listApi,
  pageNo,
  pageTotal,
  pageSize,
  tableLoading,
  totalData,
  selectedRows,
  searchModel,
  foreignModel,
  pageNoName,
  pageSizeName,
  updateListForeion,
  isCheckedAtLeastOneRow,
  handleSelectedRow,
  sizeChange,
  pageChange,
  searchList,
  lazyGetList,
} = useTableList(fetchApi);
onMounted(() => {
  searchList();
});

const searchFields: UnionFormConfigType[] = [
  {
    type: "input",
    label: "用户名",
    prop: "username",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username2",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username3",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username4",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username6",
    isFixed: true,
    span: 6,
  },
  {
    type: "select",
    label: "状态",
    prop: "status",
    isFixed: true,
    span: 6,
    options: [
      { label: "全部", value: "" },
      { label: "启用", value: "1" },
      { label: "禁用", value: "0" },
    ],
  },
  // {
  //   type: "date",
  //   label: "创建时间",
  //   prop: "createTime",
  //   dateType: "daterange",
  //   span: 12,
  // },
  {
    type: "input",
    label: "邮箱",
    prop: "email",
    span: 6,
  },
  {
    type: "select",
    label: "角色",
    prop: "role",
    span: 6,
    options: [
      { label: "管理员", value: "admin" },
      { label: "用户", value: "user" },
      { label: "访客", value: "guest" },
    ],
  },
];
</script>
